<template>
  <div class="designer-wrap">
    <FlowNav v-if="navable && !readable" :currentNav="4" :buttonName="buttonName" @change="change" />
    <MenuShot :menus="menus" @change="changeMenu" />
    <div class="designer-content-box">
      <div class="flowSetting-box">
        <div v-if="!isMobile" class="flowSetting-nav-box">
          <div class="flowSetting-nav-group">
            <div v-for="(menu, i) in menus" :key="i" :class="{ 'act-item': menu.activate == true }" class="flowSetting-nav-group-item" @click="changeMenu(menu)">
              <img :src="settingBaseIcon" />
              <span>{{ menu.name }}</span>
            </div>
          </div>
        </div>
        <div class="flowSetting-content-box">
          <Advanced v-if="currentContext == 1"></Advanced>
          <Exhibition v-if="currentContext == 2"></Exhibition>
          <Remind v-if="currentContext == 3"></Remind>
          <Print v-if="currentContext == 5"></Print>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { flowMixin } from '../../mixins/flowMixin';
  import FlowNav from '../../common/FlowNav.vue';
  import MenuShot from './MenuShot.vue';
  import Advanced from './Advanced.vue';
  import Exhibition from './Exhibition.vue';
  import Remind from './Remind.vue';
  import Print from './Print.vue';
  export default {
    name: 'FlowSetting',
    mixins: [flowMixin],
    components: { FlowNav, MenuShot, Advanced, Exhibition, Remind, Print },
    props: {
      navable: {
        type: Boolean,
        default: true,
      },
      readable: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        currentNav: 2,
        currentContext: 1,
        buttonName: '保存',
        menus: [
          {
            name: '基本配置',
            code: 1,
            activate: true,
          },
          {
            name: '展示设置',
            code: 2,
            activate: false,
          },
          {
            name: '提醒填写',
            code: 3,
            activate: false,
          },
          {
            name: '审批人设置',
            code: 4,
            activate: false,
          },
          {
            name: '打印模板',
            code: 5,
            activate: false,
          },
        ],
      };
    },
    computed: {
      isActivate() {
        return function(menu) {
          return menu.activate;
        };
      },
    },
    mounted() {},
    methods: {
      toReturn() {},
      change(type) {},
      changeMenu(menu) {
        this.currentContext = menu.code;
        this.menus.forEach((m) => {
          if (m.name == menu.name) {
            m.activate = true;
          } else {
            m.activate = false;
          }
        });
      },
      save() {
        this.$emit('save', this.nodeData);
      },
    },
  };
</script>

<style lang="scss" scoped>
.designer-wrap {
  @apply h-full bg-gray-50;
}

.designer-content-box {
  @apply h-full p-6;
}

.flowSetting-box {
  @apply flex bg-white rounded-lg shadow-sm h-full overflow-hidden;
  min-height: calc(100vh - 180px);

  .flowSetting-nav-box {
    width: 220px;
    border-right: 1px solid #f0f2f5;
    background: #fff;

    .flowSetting-nav-group {
      @apply py-4;

      &-item {
        @apply flex items-center gap-3 px-6 py-3 cursor-pointer transition-all relative;
        color: #606266;
        font-size: 14px;

        img {
          width: 18px;
          height: 18px;
          opacity: 0.7;
          transition: all 0.3s ease;
        }

        &:hover {
          color: var(--el-color-primary);
          background: var(--el-color-primary-light-9);

          img {
            opacity: 1;
          }
        }

        &.act-item {
          color: var(--el-color-primary);
          background: var(--el-color-primary-light-9);
          font-weight: 500;

          img {
            opacity: 1;
          }

          &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 20px;
            background: var(--el-color-primary);
            border-radius: 2px 0 0 2px;
          }
        }
      }
    }
  }

  .flowSetting-content-box {
    @apply flex-1 p-8 overflow-y-auto;
    background: #fff;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #dcdfe6;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flowSetting-content-box > * {
  animation: fadeIn 0.3s ease-out;
}

// 响应式处理
@media screen and (max-width: 1200px) {
  .flowSetting-box {
    .flowSetting-nav-box {
      width: 200px;
    }

    .flowSetting-content-box {
      padding: 24px;
    }
  }
}

@media screen and (max-width: 768px) {
  .designer-content-box {
    padding: 12px;
  }

  .flowSetting-box {
    flex-direction: column;
    min-height: calc(100vh - 140px);

    .flowSetting-nav-box {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid #f0f2f5;

      .flowSetting-nav-group {
        padding: 12px;
        display: flex;
        overflow-x: auto;
        white-space: nowrap;

        &-item {
          padding: 8px 16px;
          border-radius: 4px;

          &::after {
            display: none;
          }
        }
      }
    }

    .flowSetting-content-box {
      padding: 16px;
    }
  }
}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  .flowSetting-box {
    background: #1a1a1a;
    border-color: #333;

    .flowSetting-nav-box {
      background: #1a1a1a;
      border-color: #333;

      .flowSetting-nav-group-item {
        color: #a8a8a8;

        &:hover {
          background: rgba(64, 158, 255, 0.1);
        }

        &.act-item {
          background: rgba(64, 158, 255, 0.1);
        }
      }
    }

    .flowSetting-content-box {
      background: #1a1a1a;
    }
  }
}
</style>
